<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/base.js"></script>
    <script src="js/md5.js"></script>
</head>
<body>
    <!-- 推送的方式实现异步接口 -->
    <h2>上传视频</h2>
    <span id="msg">请选择文件</span><br>
    <!--    <form action="/qf/file/mp4ForGifAndJpg" method="post" enctype="multipart/form-data" >-->
    <input id="file" type="file" name="file"/>
    <!--        <input type="submit"/>-->
    <button onclick="uploadFile();">上传</button>
    <br>
    <div id="mouseDiv">
        <video id="video" controls="controls" style="border-style: solid;border-color: #000000;border-width: 1px;width:200px;height:270px"></video>
        <img id="img" style="position:relative; left:-207px; border-style: solid;border-color: #000000;border-width: 1px;width:200px;height:270px"/>
    </div>

    <script>
        //拿到userId，此时已经是登陆状态了
        let userId=localStorage.getItem("userId");
        //用userId去和webSocket服务器建立长连接
        let socket;

        let videoUrl=null;
        let jpgUrl=null;
        let gifUrl=null;
        function connectionToServer(){
            if(typeof(WebSocket)=="undefined"){
                //浏览器不支持websocket
                //alert("请使用新版本的浏览器");
            }else{
                //浏览器支持websocket
                if(socket!=null){
                    socket.close();
                    socket=null;
                }
                //websocket协议的url
                let url="ws://localhost:9002/webSocket/"+userId;

                //websocket实例化
                socket=new WebSocket(url);

                socket.onopen=function(){
                    //alert("连接成功");
                };
                socket.onmessage=function(message){
                    //document.getElementById("messages").innerHTML+=(msg.data+"<br>");
                    //msg.data里面携带的内容应该是gifWork实体。且state=1
                    //完成了
                    message=JSON.parse(message.data);
                    if(message.init!=null){
                        return;
                    }else{
                        videoUrl=message.videoUrl;
                        jpgUrl=message.jpgUrl;
                        gifUrl=message.gifUrl;
                        //获取到三个url
                        document.getElementById("video").src=videoUrl;
                        document.getElementById("img").src=jpgUrl;
                        msg.innerHTML="后台处理完毕，现在已经可以展示封面与预览。";
                    }
                };
                socket.onclose=function(){
                    //alert("连接已经关闭");
                };
                socket.onerror=function(){
                    //alert("连接发生异常");
                };
            }
        }
        connectionToServer();


        let msg=document.getElementById("msg");
        //在请求服务器上传文件的时候，附带token
        function uploadFile(){
            msg.innerHTML="文件正在上传";
            let url="/qf/file/mp4ForGifAndJpgForPushMsg";
            let fileObj = document.getElementById("file").files[0];
            // FormData 对象
            let form = new FormData();

            // 文件对象
            form.append("file", fileObj);
            $.post(url,form,function(r){
                if(r.code==200){
                    //上传成功
                    msg.innerHTML="文件上传成功！正在等待后台处理生成gif与jpg...";
                }
            });
        }

    </script>
    <script>
        let mouseDiv=document.getElementById("mouseDiv");
        let video=document.getElementById("video");
        let img=document.getElementById("img");
        //注册鼠标经过时事件处理函数
        img.onmouseover = function(){
            if(gifUrl!=null){
                img.src=gifUrl;
            }
        };
        //注册鼠标移开时事件处理函数
        img.onmouseout = function(){
            if(jpgUrl!=null){
                img.src=jpgUrl;
            }
        };

        //注册鼠标单击时事件处理函数
        img.onclick = function(){
            if(videoUrl!=null){
                //img得消失
                img.style.display="none";
                video.play();
            }
        };


    </script>
</body>
</html>